<template>
  <div class="pay-success">
    <div class="pay-img">
      <img src="@/assets/img/pay-success.png" alt="">
    </div>
    <p>
      支付成功
      <button @click="goHome">点击继续购物</button>
    </p>
  </div>
</template>

<script>
import http from '@/serveies/api/request'
import qs from 'qs'
import { Toast } from 'mint-ui'
export default {
  name: 'paySuccess',
  created () {
    this.getSuccess()
  },
  methods: {
    getSuccess () {
      const data = {
        out_trade_no: this.$route.query.out_trade_no,
        trade_no: this.$route.query.trade_no
      }
      http.$axios({
        url: '/api/queryOrderAlipay',
        method: 'post',
        headers: {
          token: true,
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: qs.stringify(data)
      }).then(res => {
        Toast(res.msg)
      })
    },
    goHome () {
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="scss" scoped>
.pay-success {
  width: 100vw;
  height: 100vh;
  background-color: #eee;
  .pay-img {
    width: 100%;
    height: 3.2rem;
    position: relative;
    img {
      width: 2.666667rem;
      height: 2.666667rem;
      vertical-align: middle;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
  }
  p {
    font-size: .533333rem;
    text-align: center;
    button {
      border:none;
      color: #ff6700;
    }
  }
}
</style>
